<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<md-step label="Security" md-complete="$ctrl.parent.steps[1].completed">
  <md-step-body>
    <md-content layout-padding class="gv-creation-content">
      <form name="applicationForm" ng-submit="$ctrl.next()">
        <div class="gv-form" ng-if="$ctrl.parent.clientRegistrationEnabled()">
          <div class="gv-form-content" layout="column">
            <div layout="row" layout-margin layout-align="center center">
              <div
                flex="20"
                layout="column"
                class="application-type-box"
                ng-class="{'application-type-box-selected' : type.id === $ctrl.selectedType.id, 'application-type-box-unselected' : type.id !== $ctrl.selectedType.id}"
                ng-click="$ctrl.selectType(type)"
                ng-repeat="type in $ctrl.parent.enabledApplicationTypes"
              >
                <ng-md-icon class="icon" size="48" icon="{{::type.icon}}"></ng-md-icon>
                <span class="title">{{::type.name}}</span>
                <span class="description">{{::type.description}}</span>
              </div>
              <div ng-if="!$ctrl.parent.enabledApplicationTypes || $ctrl.parent.enabledApplicationTypes.length === 0">
                <div flex="100" layout="column" layout-align="center center">
                  No application type available, please check Client Registration configuration.
                </div>
              </div>
            </div>
          </div>

          <div ng-if="$ctrl.selectedType.isOauth()">
            <div class="gv-form-content" layout="column" ng-if="$ctrl.selectedType.allowed_grant_types">
              <md-input-container class="md-block">
                <label>Allowed grant types</label>
                <md-select
                  ng-model="$ctrl.parent.application.settings.oauth.grant_types"
                  ng-change="$ctrl.updateGrantTypes()"
                  multiple
                  required
                >
                  <md-option
                    ng-value="grantType.type"
                    ng-repeat="grantType in $ctrl.selectedType.allowed_grant_types"
                    ng-disabled="$ctrl.selectedType.isGrantTypeMandatory(grantType)"
                  >
                    {{::grantType.name}}
                  </md-option>
                </md-select>
                <div class="hint">Grant types allowed for the client. Please set only grant types you need for security reasons.</div>
              </md-input-container>

              <md-input-container class="md-block" ng-if="$ctrl.displayRedirectUris()">
                <label>Redirect URIs *</label>
                <md-chips
                  required
                  md-add-on-blur="true"
                  ng-model="$ctrl.parent.application.settings.oauth.redirect_uris"
                  placeholder="Enter a redirect URI"
                  md-on-remove="$ctrl.applicationForm.$setDirty()"
                  ng-click="applicationForm.$setDirty()"
                ></md-chips>
                <div class="hint">URIs where the authorization server will send OAuth responses</div>
              </md-input-container>
            </div>
          </div>
        </div>

        <div class="gv-form" ng-if="$ctrl.displaySimpleAppConfig()">
          <div class="gv-form-content" layout="column">
            <md-input-container class="md-block">
              <label>Type</label>
              <input ng-model="$ctrl.parent.application.settings.app.type" type="text" name="type" />
              <div class="hint" ng-if="applicationForm.type.$valid || applicationForm.type.$pristine">
                Type of the application (mobile, web, ...).
              </div>
            </md-input-container>

            <md-input-container class="md-block" flex="50">
              <label>Client ID</label>
              <input
                ng-model="$ctrl.parent.application.settings.app.client_id"
                type="text"
                name="clientId"
                minlength="1"
                md-maxlength="300"
              />
              <div class="hint" ng-if="applicationForm.clientId.$valid || applicationForm.clientId.$pristine">
                The <code>Client_id</code> of the application. This field is required to subscribe to certain type of API Plan (OAuth2,
                JWT).
              </div>
              <div ng-messages="applicationForm.clientId.$error">
                <div ng-message="minlength">The name has to be more than 1 characters long.</div>
                <div ng-message="md-maxlength">The name has to be less than 300 characters long.</div>
              </div>
            </md-input-container>
          </div>
        </div>
        <md-step-actions layout="row">
          <div flex>
            <md-button ng-click="$ctrl.parent.previous()">PREVIOUS</md-button>
          </div>
          <div flex layout="row" layout-align="end top">
            <md-button ng-click="$ctrl.next()" ng-disabled="applicationForm.$dirty" ng-if="!$ctrl.parent.clientRegistrationEnabled()"
              >SKIP</md-button
            >
            <md-button type="submit" ng-disabled="applicationForm.$invalid">NEXT</md-button>
          </div>
        </md-step-actions>
      </form>
    </md-content>
  </md-step-body>
</md-step>
